<template>
    <el-carousel height="600px" class="">
        <el-carousel-item v-for="item in bannerList">
            <el-image style="width: 100%;height:100%;" :src="item.bannerUrl" fit="cover" />
        </el-carousel-item>
    </el-carousel>
    <div class="flex flex-col mx-8 mt-8">
        <div class="text-lg font-semibold">电影资讯</div>
        <div class="flex mt-2">
            <div class="p-4 rounded-md shadow-md bg-slate-500" v-for="item in newsList" @click="gotoNewsDetail(item)">
                <div>{{ item.title }}</div>
                <div>{{ item.createTime }}</div>
            </div>
        </div>
    </div>
    <div class="flex flex-col mx-8 mt-8">
        <div class="text-lg font-semibold">电影推荐</div>
        <div class="flex flex-wrap gap-3 mx-5 mt-2">
            <MovieItem @click.native="gotoDetail(item)" v-for="item in recommendList" :name="item.movieName"
                :img="item.movieImg" :score="item.movieScore" :types="formatTypes(item.movieTypes)">
            </MovieItem>
        </div>
    </div>
    <div class="flex flex-col mx-8 mt-8">
        <div class="text-lg font-semibold">全部电影</div>
        <div class="flex flex-wrap gap-3 mx-5 mt-2">
            <MovieItem @click.native="gotoDetail(item)" v-for="item in movieList" :name="item.movieName"
                :img="item.movieImg" :score="item.movieScore" :types="formatTypes(item.movieTypes)">
            </MovieItem>
        </div>
    </div>
    <!-- <div class="flex flex-wrap gap-3 mx-5 mt-4">
        <MovieItem @click.native="gotoDetail(item)" v-for="item in movieList" :name="item.movieName"
            :img="item.movieImg" :score="item.movieScore" :types="formatTypes(item.movieTypes)">
        </MovieItem>
    </div> -->




</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

import { getMovieList, getMovieRecommend } from '@/apis/movie'
import { getBannerList } from '@/apis/banner'

import MovieItem from '@/components/MovieItem.vue'
import { onMounted, ref } from 'vue'
import { getNewsList } from '@/apis/article'
// import { getGoodsList } from '@/apis/movie'
// import { getGroupRuleList } from '@/apis/banner'
const movieList = ref([])
const recommendList = ref([])
const route = useRoute()
const router = useRouter()
const getList = async () => {
    const res = await getMovieList({
        pageSize: 1000,
        pageNum: 1
    })
    movieList.value = res.list
}
const getRecommandList = async () => {
    const res = await getMovieRecommend({
        pageSize: 1000,
        pageNum: 1
    })
    recommendList.value = res.list
}
const bannerList = ref([])
const getBanners = async () => {
    const res = await getBannerList()
    bannerList.value = res
}
const newsList = ref([])
const getNews = async () => {
    const res = await getNewsList({ pageSize: 1000, pageNum: 1 })
    newsList.value = res.list
}
const formatTypes = (types = []) => {
    if (!types) return []
    return types.map(item => item.typeName)
}
const gotoDetail = (item) => {
    router.push({
        name: 'MovieDetail',
        query: {
            id: item.id
        }
    })
}
const gotoNewsDetail = (item) => {
    router.push({
        name: 'NewsDetail',
        query: {
            id: item.id
        }
    })
}
onMounted(() => {
    getList()
    getBanners()
    getNews()
    getRecommandList()
})
</script>

<style scoped></style>
